<template>
  <div class="TabsWrap" v-if="promptSetting!=null">
    <div class="setBtn" @click="uploadImg" style="margin-bottom: 12px; background: #fff; color: #2c3e50; padding: 0 12px; border-radius: 12px; line-height: 20px; overflow: hidden;" v-loading="uploadLoading">uploadImg</div>
    <div class="TabsWrapContent">
      <div class="Tabs">
        <template v-for="(selecter, index) in promptSetting.sessionList" :v-key="index">
          <div :class="'tab'+ (nowTab == index?' hover':'')"  @click="nowTab = index">{{ selecter.title }}</div>
        </template>
      </div>
      <div class="TabContent">
        <div class="item" v-for="(item, index) in promptSetting.sessionList[nowTab].option">
          <div class="img" v-if="imgSetting.filter(s=>s.title == promptSetting.sessionList[nowTab].title).length > 0">
            <img :src="item.baseImgUrl" style="width: 30px; height: 30px;" />
            <img :src="item.priviewImg" style="width: 30px; height: 30px;" />
          </div>
          <div class="title">{{ item.name }}</div>
          <div class="txt">{{ item.prompt }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.TabsWrap{width:100%; height:100%; box-sizing:border-box; padding: 20px;}
.TabsWrapContent{ border-radius:20px; background:#fff; font-size: 16px; color:#333; height: 100%; box-sizing:border-box; overflow:hidden; display:flex; }
.Tabs{ border-bottom: 1px solid #eee; text-align: left; overflow: hidden; background: #eee; padding:18px; height:100%; overflow-y:auto; width: 180px;}
.Tabs .tab{  display: block; line-height:20px; padding: 12px 18px; margin:12px; float: left; clear: both; }
.Tabs .tab.hover{background: #21213c; color:#fff; border-radius:20px;}

.TabContent{ padding:18px; flex:1; overflow-y:auto;}
.TabContent .item{ width: 50%; float:left; display:flex;  padding:8px 12px; line-height:16px; text-align:left; box-sizing:border-box;}
.TabContent .item .title{ width: 120px; }
.TabContent .item .txt{ color:#999; flex:1;}
</style>

<script>
import WebRequest from '../unit/request.js'
export default {
  name: 'UploadPromptImage',
  components: {  },
  data () {
    return {
      promptSetting:null,
      isLoadingPrompt:false,
      nowTab:0,
      imgSetting:[{title:'光照',basename:'gz'},{title:'风格',basename:'fg'},{title:'视角',basename:'sj'},{title:'构图',basename:'gt'}],
      //imgSetting:[],
      uploadLoading:false
    }
  },
  mounted(){
    var self = this
    if(this.promptSetting == null && !this.isLoadingPrompt)
    this.isLoadingPrompt = true
    WebRequest.GetSelecterSetting({
      callback: function (res) {
        if(res.status == 200 && res.data.errCode == 10000){
          self.promptSetting = JSON.parse(res.data.data)
          this.isLoadingPrompt = false
          self.promptSetting.sessionList.forEach((selecter,index) =>{
            var setting = self.imgSetting.filter(s=>s.title == selecter.title);
            if(setting.length > 0){
              var set = setting[0]
              selecter.displayType = 'image'
              selecter.option.forEach((opt, i) => {
                opt.baseImgUrl = 'https://pro-1300383930.cos.ap-nanjing.myqcloud.com/'+set.basename+'/'+set.basename+'%20('+(i+1)+').png?imageMogr2/thumbnail/360x/rquality/80'
                var checkTxt = opt.priviewImg.substr(0,12)
                //console.log(checkTxt)
                if(checkTxt == 'https://eqmj'){
                  opt.priviewImg= ''
                }
              })
            }else{
              selecter.displayType = 'text'
              selecter.option.forEach((opt, i) => {
                  opt.priviewImg= ''
              })
            }
          })
          
        }else{
          this.promptSetting = null
          this.isLoadingPrompt = false
        }
      }
    })
  },
  methods: {
    GetImgHtml(i){
      return '<img :src="../assets/images/prompt_image/guangzhao-rename/gz ('+(i + 1)+').png" style="width: 30px; height: 30px;" />'
    },
    uploadImg(){
      console.log("start")
      var self = this
      self.uploadLoading=true;
      var setting = JSON.parse(JSON.stringify(self.promptSetting))
      var i = 0;
      var index = 0;
      var imgCanUpload = true
      var uploader = setInterval(() => { 
        var selecter = setting.sessionList[index];
        var opt = selecter.option[i];
        if(imgCanUpload){
          imgCanUpload = false
          if(selecter.displayType == 'image'){
            if(opt.priviewImg==''){
            WebRequest.UploadWebImageToOss({
              url:opt.baseImgUrl,
              callback:function(res){
                console.log(res.data)
                if(res.data.errCode == 10000){
                  var obj = {
                    optionId: opt.optionId,
                    name: opt.name,
                    prompt: opt.prompt,
                    index: opt.index,
                    priviewImg: res.data.data,
                  }
                  setting.sessionList[index].option[i] = obj
                  //console.log(setting.sessionList[index].option[i] )
                  self.promptSetting = setting;
                  i++
                  console.log(index,i)
                  if(i >= selecter.option.length){
                    index++
                    i=0
                  }
                  imgCanUpload = true
                }
              },
              error:function(res){
                console.log(res.data)
                imgCanUpload = true
              }
            })
          }else{
            imgCanUpload = true
            i++
            console.log(index,i)
            if(i >= selecter.option.length){
              index++
              i=0
            }
          }
        }else{
          index++
          i=0
          imgCanUpload=true
        }
      }
      if(index>=setting.sessionList.length){
        clearInterval(uploader);
        console.log(JSON.stringify(self.promptSetting))
        self.uploadLoading=false;
      }
      }, 10);
    }
  }
}
</script>

